<!-- 
    
 -->
<html>

<head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            // 画背景
            ctx.fillStyle = 'rgb(255,221,0)';
            ctx.fillRect(0, 0, 150, 37.5);
            ctx.fillStyle = 'rgb(102,204,0)';
            ctx.fillRect(0, 37.5, 150, 37.5);
            ctx.fillStyle = 'rgb(0,153,255)';
            ctx.fillRect(0, 75, 150, 37.5);
            ctx.fillStyle = 'rgb(255,51,0)';
            ctx.fillRect(0, 112.5, 150, 37.5);

            // 画半透明矩形
            for (var i = 0; i < 10; i++) {
                ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
                for (var j = 0; j < 4; j++) {
                    ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5)
                }
            }
        }
    </script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body onload="draw();">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

</html>